<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>game1</title>
    <style media="screen">
        canvas {
            border: 1px black solid;
        }
    </style>
    <script src= 'guagame.js'></script>
    <script src= 'ball.js'></script>
    <script src= 'paddle.js'></script>
    <script src= 'block.js'></script>
    <script src='utils.js'></script>
    <script src='level.js'></script>
    
    
</head>

<body>
    <canvas id="id-canvas" width="400" height="300"></canvas>

    <hr>
    <input type="range" name="" id="id-input-speed" value="1">

    <script type="text/javascript" >
        var log = console.log.bind(console)
        var loadLevels = function (n) {
            n = n - 1
            var blocks = []
            var level = levels[n]
            for (var i = 0; i < level.length; i++) {
                var p = level[i];
                var b = Blcok(p)
                // set block                 
                blocks.push(b)
            }

            return blocks
        }

        var blocks = []
        var enableDebugMode = function(enable)
        {
            if(!enable)
            {
                return
            }

            window.paused = true
            window.addEventListener('keydown', function(event){
                var key = event.key
                if(key == 'p')
                {
                    window.paused = !window.paused
                }
                else if('123456'.includes(key))
                {
                    blocks = loadLevels(key)
                }
                
            })

            // range
            document.querySelector('#id-input-speed').addEventListener('input', function () {
                var input = event.target
                //log(event, input.value)
                window.fps = Number(input.value)
                log(window.fps)
            })
        }


        var _main = function(){
            log('_main')
        
            paused = true
            var paddle = Paddle()
            var ball = Ball()
            var game = GuaGame()
            blocks = loadLevels(1)

            game.registerAction('a', function(){
                paddle.moveLeft()
            })
            game.registerAction('d', function(){
                paddle.moveRight()
            })

            game.registerAction('f', function(){
                ball.fire()
            })

            // 为了debug临时加的
            enableDebugMode(true)

            game.update = function () { 
                if(!window.paused)
                {
                    return
                }
                ball.move()  

                //判断相撞
                if (paddle.collide(ball)) {
                    ball.reverse()                    
                }    
                // 判断ball和blocks相撞
                for (var i = 0; i < blocks.length; i++) {
                    var block = blocks[i]
                    if (block.collide(ball)) {
                        log("判断ball和block相撞")
                        block.kill()
                        ball.reverse()
                    } 
                }
                        
            }
            game.draw = function (){
                //draw
                //game.context.drawImage(paddle.image, paddle.x, paddle.y)
                game.drawImage(paddle) 
                game.drawImage(ball)

                for (var i = 0; i < blocks.length; i++) {
                    var block = blocks[i]
                    if (block.alive) {
                        game.drawImage(block)
                    }
                }                
            }
            }
        _main()
    </script>
</body>


</html>


    
